<template>
	<view style="overflow: hidden;">
		<view class="d-flex flex-column login_top">
			<view style="font-size: 38upx;color:#ffffff;font-weight: bold;">
				<text>欢迎使用【考生端】</text>
			</view>
			<view style="font-size: 60upx;color:#ffffff;font-weight: bold;">
				<text>两类人员安全考核平台</text>
			</view>
		</view>
		<view class="bg-white d-flex flex-column px-5 py-2 login_con">
			<view class="login_field">
				<text>账号</text>
			</view>
			<view>
				<input type="text" class="login_input" v-model="username" placeholder="请输入身份证号" />
			</view>

			<view class="login_field">
				<text>密码</text>
			</view>
			<view class="d-flex flex-row flex-nowrap">
				<input style="width:610upx;" class="login_input" v-model="password" placeholder="请输入密码" :password="showPassword" />
				<uni-icons style="width:70upx;margin-top:10upx;" :type=" showPassword ? 'eye-slash' : 'eye' " size="25"
					@click="changePassword"></uni-icons>
			</view>
			<!--
			<view style="text-align: right;">
				<text>忘记密码</text>
			</view>
			-->
			<view style="height: 100upx;margin-top:30upx;">
				<button class="login_btn" @click="submit">登录</button>
			</view>
			<view>
				<view class="d-flex flex-row flex-nowrap" @click="check = !check">
					<checkbox :checked="check" style="transform:scale(0.7)"></checkbox>
					<text style="font-size: 26upx;" @click="gotoPrivacy">我已同意并阅读用户隐私保护协议</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'

	export default {
		data() {
			return {
				showPassword: true,

				username: '',
				password: '',
				check: true,

				// 验证规则
				rules: {
					username: [{
						//rule: /^[a-zA-Z]\w{5,17}$/,
						rule: /^[a-zA-Z0-9]\w{6,18}$/,
						msg: "账号长度必须为6~18位之间"
					}],
					password: [{
						rule: /^.{5,20}$/,
						msg: "密码长度必须为6-20位之间"
					}],
					repassword: []
				},

			}
		},
		
		onLoad() {
			
			// 如果storage中有用户信息，直接登录
			let userInfo = uni.getStorageSync('userInfo')
			console.log('userinfo:' + JSON.stringify(userInfo));
			if (userInfo) {
				uni.switchTab({
					url: "/pages/index/index"
				})
			}
		},
		methods: {
			...mapMutations(['login']),

			// 表单验证
			validate(key) {
				var check = true
				this.rules[key].forEach((v) => {
					// 验证失败
					if (!(v.rule).test(this[key])) {
						uni.showToast({
							title: v.msg,
							icon: 'none'
						});
						check = false
						return false
					}
				})
				return check
			},


			// 登录提交
			submit() {
				
				
				if(!this.username){
					return uni.showToast({
						title: '请输入账号',
						icon: 'none'
					})
				}
				
				if(!this.password){
					return uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
				}
				
				
				if (!this.check) {
					return uni.showToast({
						title: '请先同意用户隐私保护协议',
						icon: 'none'
					})
				}

				if (!this.validate('username')) return;
				if (!this.validate('password')) return;
				
				let param = {
					username: this.username,
					password: this.password
				}
				
				let loginUrl = '/login'
				this.$H.post(loginUrl, param).then(res=>{
					if(!res || res.code != 200){
						return uni.showToast({
							title: '账号或密码错误',
							icon: 'none'
						})
					}
					// 登录成功，存储状态
					this.login(res.result)
					uni.showToast({
						title: '登录成功',
						icon: 'none'
					})
					
					setTimeout(function(){
						uni.switchTab({
							url: '/pages/index/index'
						})
					}, 500)
					
				}).catch( err =>{
					if(err.msg){
						uni.showToast({
							title: err.msg,
							icon: 'none'
						})
					}
				})
			},
			changePassword: function() {
				this.showPassword = !this.showPassword;
			},
			
			gotoPrivacy(){
				uni.navigateTo({
					url: "/pages/privacy"
				})
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
		background: #f1f1f1;
	}

	.login_btn {
		height: 80upx;
		line-height: 80upx;
		border-radius: 40upx;
		color: #ffffff;
		background-color: #2878ff;
		font-size: 30upx;
	}

	.login_top {
		padding-top: 190upx;
		padding-left: 40upx;
		background-size: 100%;
		background-attachment: fixed;
		width: 750upx;
		height: 500upx;
		background-image: url();
	}

	.login_con {
		width: 653upx;
		background-color: rebeccapurple;
		position: absolute;
		top: 445upx;
		border-radius: 50upx;
		line-height: 80upx;
	}

	.login_field {
		font-size: 32upx;
	}

	.login_input {
		height: 100upx;
		line-height: 100upx;
		border-bottom: 1px solid #f2f2f2;

	}
</style>